<template>
  <div>
    <a-select
      show-search
      placeholder="Select a person"
      option-filter-prop="children"
      style="width: 200px"
      @focus="handleFocus"
      @blur="handleBlur"
      @change="handleChange"
    >
      <a-select-option value="jack">
        Jack
      </a-select-option>
      <a-select-option value="lucy">
        Lucy
      </a-select-option>
      <a-select-option value="tom">
        Tom
      </a-select-option>
    </a-select>

    <a-select mode="default" :show-search="true" placeholder="请选择" style="width: 200px">
      <a-select-option v-for="item in list" :key="item.id" :value="item.id">
        {{ item.labelName }}
      </a-select-option>
    </a-select>

    <a-select placeholder="优化前" style="width: 200px">
      <a-select-option v-for="item in largeSelectData" :key="item.id">{{
        item.labelName
      }}</a-select-option>
    </a-select>

    <a-select placeholder="优化后" style="width: 200px" isLargeData>
      <a-select-option v-for="item in largeSelectData" :key="item.id">{{
        item.labelName
      }}</a-select-option>
    </a-select>
  </div>
</template>
<script>
import largeSelectData from '../constant/largeSelectData';

export default {
  data() {
    return {
      largeSelectData,

      list: [
        { id: '1334732046483984384', attrId: '1334732045762564096', labelName: '熏黑', isCheck: 0 },
        { id: '1334732046521733120', attrId: '1334732045762564096', labelName: '白光', isCheck: 0 },
        { id: '1334732046567870464', attrId: '1334732045762564096', labelName: '白色', isCheck: 0 },
        { id: '1335131363963179008', attrId: '1334732045762564096', labelName: '黑色', isCheck: 0 },
        { id: '1339469710990905344', attrId: '1334732045762564096', labelName: '黄色', isCheck: 0 },
        { id: '1339469710990905345', attrId: '1334732045762564096', labelName: '黄色', isCheck: 0 },
        { id: '1339469710990905346', attrId: '1334732045762564096', labelName: '黄色', isCheck: 0 },
        { id: '1339469710990905347', attrId: '1334732045762564096', labelName: '黄色', isCheck: 0 },
        { id: '1339469710990905348', attrId: '1334732045762564096', labelName: '黄色', isCheck: 0 },
        { id: '1339469710990905349', attrId: '1334732045762564096', labelName: '黄色', isCheck: 0 },
        { id: '1339469710990905350', attrId: '1334732045762564096', labelName: '黄色', isCheck: 0 },
        {
          id: '1349298800740667392',
          attrId: '1334732045762564096',
          labelName: '黑1色',
          isCheck: 0,
        },
      ],
    };
  },
  methods: {
    handleChange(value) {
      console.log(`selected ${value}`); // eslint-disable-line
    },
    handleBlur() {
      console.log('blur'); // eslint-disable-line
    },
    handleFocus() {
      console.log('focus'); // eslint-disable-line
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>
